<script setup>
import {useRoute} from "vue-router";
import {computed, defineProps} from "vue";
import router from "@/router";

const route = useRoute()
const prop = defineProps({
  openItems: {
    type: Array,
    default: () => {
      return ['home']
    }
  },
  isCollapse: {
    type: Boolean,
    default: () => true
  }
})
// const emit = defineEmits(['mobileClick'])
const cls = computed(() => {
  let cls = 'el-menu-vertical'
  if (!prop.isCollapse) {
    cls += ' el-menu-vertical-close'
  }

  return cls
})
const pCls = computed(() => {
  let cls = ""
  if (!prop.isCollapse)
    cls += 'scrollbar-width'
  // if (isMobile()) cls += 'left-menu-mobile'
  return cls
})
const changeMenu = async (value) => {
  // 获取所有已配置的路由
  const routeName = (router.options.routes).map(its => {
    return its.name
  })
  if (value !== route.name && routeName.some(its => its === value)) {
    //验证菜单是否可以访问
    router.replace({name: value})
    // if (isMobile()) {
    //   emit('mobileClick')
    // }
  }
}

</script>

<template>
  <el-scrollbar class="left-menu" :class="pCls">
    <el-menu :class="cls" :default-active="route.name" :default-openeds="openItems" @select="changeMenu"
             unique-opened :collapse="!isCollapse">
      <el-menu-item index="home">
        <el-icon>
          <HomeFilled/>
        </el-icon>
        <template #title>首页</template>
      </el-menu-item>
      <el-sub-menu expand-close-icon="ArrowRight" expand-open-icon="ArrowDown" index="product">
        <template #title>
          <el-icon>
            <Handbag/>
          </el-icon>
          <span>产品管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="productLst">产品管理</el-menu-item>
          <el-menu-item index="pack">礼包管理</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
      <el-sub-menu expand-close-icon="ArrowRight" expand-open-icon="ArrowDown" index="plate">
        <template #title>
          <el-icon>
            <CollectionTag/>
          </el-icon>
          <span>渠道管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="supplier">代理商</el-menu-item>
          <el-menu-item index="recode">礼包领取记录</el-menu-item>
          <el-menu-item index="order">礼包兑换记录</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
      <!--      <el-menu-item index="plate">-->
      <!--        <el-icon>-->
      <!--          <CollectionTag/>-->
      <!--        </el-icon>-->
      <!--        <template #title>渠道代理</template>-->
      <!--      </el-menu-item>-->
    </el-menu>
  </el-scrollbar>

</template>

<style scoped lang="less">
.left-menu {
  height: calc(100vh - 45px);
  max-width: 220px;
  border-right: var(--el-border);

  &.left-menu-mobile {
    border-right: none;
    height: 100vh;
  }

  &.scrollbar-width {
    width: 65px;
    //overflow-x: hidden;
  }

  .el-menu {
    border-right: none;
  }
}

.el-menu-vertical {
  max-width: 220px;
  height: 100%;

  .el-icon {
    padding-right: 15px;
  }
}

</style>
